<!DOCTYPE html>
<html>

<head>
    <title>用户信息·车队管理系统</title>
    <style>
        .el-table .online-row {
        background: #dfffe2;
    }

    </style>
    {include file="common/header"/}
    <el-main>
        <el-form :inline="true">
            <el-form-item>
                <el-button type="primary" icon="el-icon-edit" size="small" @click="clickAdd">添加</el-button>
            </el-form-item>
        </el-form>
        <el-table :data="user" :row-class-name="tableRowClassName">
            <el-table-column prop="uid" label="ID" width="50%">
            </el-table-column>
            <el-table-column prop="username" label="用户名">
            </el-table-column>
            <el-table-column prop="name" label="姓名">
            </el-table-column>
            <el-table-column prop="creat_time" label="创建时间" >
            </el-table-column>
            <el-table-column prop="update_time" label="上次登录时间" >
            </el-table-column>
            <el-table-column prop="status" label="状态">
            </el-table-column>
            <el-table-column prop="group" label="用户组">
            </el-table-column>
            <el-table-column label="操作" width="180">
                <template slot-scope="scope">
                    <el-link type="info" @click="clickEdit(scope.row)" :underline="false"><i class="el-icon-edit"></i>编辑
                    </el-link>
<!--                    <el-link type="info" @click="" :underline="false"><i class="el-icon-edit"></i>余额-->
<!--                    </el-link>-->
<!--                    <el-link type="info" @click="" :underline="false"><i class="el-icon-edit"></i>余额-->
<!--                    </el-link>-->
                    <el-link type="danger" @click="postDelete(scope.row)" :underline="false"><i
                            class="el-icon-delete"></i>删除</el-link>
                </template>
            </el-table-column>

        </el-table>
    </el-main>
    <!-- 修改框 -->
    <el-dialog title="修改用户信息" :visible.sync="dialogFormEdit" :modal-append-to-body='false'>
        <el-form :model="formEdit" ref="formEdit">

            <el-form-item prop="uid" label="uid(不可更改)" >
                <el-input size="medium" autocomplete="off" v-model="formEdit.uid" readonly="true"></el-input>
            </el-form-item>
            <el-form-item prop="username" label="用户名(不可更改)">
                <el-input size="medium" autocomplete="off" v-model="formEdit.username" readonly="true"></el-input>
            </el-form-item>
            <el-form-item prop="name" label="姓名" :label-width="50">
                <el-input size="medium" autocomplete="off" v-model="formEdit.name"></el-input>
            </el-form-item>
            <el-form-item prop="group" label="用户组" :label-width="50">
                <el-radio-group v-model="formEdit.group">
                    <el-radio label="superadmin">超级管理员</el-radio>
                    <el-radio label="admin">管理员</el-radio>
                    <el-radio label="staff">员工</el-radio>
                </el-radio-group>
            </el-form-item>

        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="postEdit()">确认修改</el-button>
        </div>
    </el-dialog>

    <!-- 添加框 -->
    <el-dialog title="添加用户" :visible.sync="dialogFormAdd" :modal-append-to-body='false'>
        <el-form :model="formAdd" ref="formAdd">

            <el-form-item prop="name" label="姓名">
                <el-input size="medium" autocomplete="off" v-model="formAdd.name"></el-input>
            </el-form-item>
            <el-form-item prop="username" label="用户名">
                <el-input size="medium" autocomplete="off" v-model="formAdd.username"></el-input>
            </el-form-item>
            <el-form-item prop="uncodepassword" label="密码">
                <el-input size="medium" autocomplete="off" v-model="formAdd.uncodepassword" show-password></el-input>
            </el-form-item>
            <el-form-item prop="group" label="用户组">
                <el-radio-group v-model="formAdd.group">
                    <el-radio label="superadmin">超级管理员</el-radio>
                    <el-radio label="admin">管理员</el-radio>
                    <el-radio label="staff">员工</el-radio>
                </el-radio-group>
            </el-form-item>

        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="postAdd()">确认添加</el-button>
        </div>
    </el-dialog>
    {include file="common/footer"/}
    <script>
        new Vue({
            el: '#app',
            data:{
                user:{

                },
                username:"",
                formEdit:{

                },
                formAdd:{

                },
                dialogFormAdd:false,
                dialogFormEdit:false,
            },
            mounted () {
                // this.baiduMap();
                // this.username = getCookie('username');
                this.abcd();
                this.abc();
            },

            methods: {
                logOut() {
                    var that = this;
                    axios.post('user/logout')
                        .then(function (response)
                        {
                            if (response.data.code == 200) {
                                that.$message({
                                    message: '退出成功,正在跳转中',
                                    type: 'success'
                                });
                                setTimeout(function () {
                                    location.replace('');
                                }, 1000)
                            } else {
                                that.$message.error(response.data.msg);
                            }
                        })
                        .catch(function (error)
                        {
                            that.$message.error('tuichu失败，服务器内部错误');
                        })
                    ;

                },
                abc(){
                    var that = this;
                    axios.post('user/getalluser')
                        .then(function (response)
                        {
                            that.user = response.data.data;
                        })

                },
                abcd(){
                    var that = this;
                    axios.post('user/getmyvalue')
                        .then(function (response)
                        {
                            that.username = response.data.data.name;
                        })

                },
                clickAdd(){
                    var that = this;
                    that.formAdd = {};
                    that.dialogFormAdd = true;
                },
                postDelete(row){
                    var that = this;
                    this.$confirm('确认删除用户？', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(()=>{
                    axios.post('user/deleteuser', Object.assign({}, PostBase, {
                        pk: row.uid
                    }))
                        .then(function (response) {
                            if (response.data.code == CODE_SUCCESS) {
                                that.$message({
                                    message: response.data.msg,
                                    type: 'success'
                                });
                                setTimeout(function () {
                                    location.replace('');
                                }, 1000)
                            } else {
                                that.$message.error(response.data.msg);
                            }
                        })
                })
                        .catch(function (error) {
                            that.$message.error('服务器内部错误');
                            console.log(error);
                        });
                },
                clickEdit(row){
                    var that = this;
                    that.formEdit = row;
                    axios.post('user/getdata', Object.assign({}, PostBase, {
                        pk: row.uid
                    }))
                        .then(function (response) {
                            if (response.data.code == CODE_SUCCESS) {
                                that.formEdit = response.data.data;
                                that.dialogFormEdit = true;
                            } else {
                                that.$message.error(response.data.msg);
                            }
                        })
                        .catch(function (error) {
                            that.$message.error('服务器内部错误');
                            console.log(error);
                        });
                },
                postAdd(){
                    var that = this;
                    axios.post('user/adduser', Object.assign({}, PostBase, that.formAdd))
                        .then(function (response) {
                            if (response.data.code == CODE_SUCCESS) {
                                that.$message({
                                    message: response.data.msg,
                                    type: 'success'
                                });
                                that.dialogFormAdd = false;
                                setTimeout(function () {
                                    location.replace('');
                                }, 1000)
                            } else {
                                that.$message.error(response.data.msg);
                            }
                        })
                        .catch(function (error) {
                            that.$message.error('服务器内部错误');
                            console.log(error);
                        });
                },
                postEdit(){
                    var that = this;
                    axios.post('user/updateuser', Object.assign({}, PostBase, that.formEdit))
                        .then(function (response) {
                            if (response.data.code == CODE_SUCCESS) {
                                that.$message({
                                    message: response.data.msg,
                                    type: 'success'
                                });
                                that.dialogFormEdit = false;
                                setTimeout(function () {
                                    location.replace('');
                                }, 1000)
                            } else {
                                that.$message.error(response.data.msg);
                            }
                        })
                        .catch(function (error) {
                            that.$message.error('服务器内部错误');
                            console.log(error);
                        });
                },
                tableRowClassName({row}) {
                    if (row.status === 'online') {
                        return 'online-row';
                    }
                    return '';
                }
            }
        })
    </script>

</html>